<template>
  <div class="card-list">
    <div class="tab-nav">
      <span
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === tab.key }"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </span>
    </div>
    <div class="cards" v-if="filteredCards.length">
      <div v-for="(card, idx) in filteredCards" :key="idx" class="card-item">
        <div class="card-header">
          <img :src="card.logo" :alt="card.title" class="card-logo" />
          <div class="header-right">
            <div class="header-right-item">
              <span class="card-title">{{ card.title }}</span>
              <span class="card-tag">{{ CategoryMap[card.tag] }}</span>
            </div>
            <div class="header-right-item">
              <span class="card-desc">{{ card.desc }}</span>
            </div>
          </div>
        </div>

        <div class="card-meta">
          <div class="meta-item">
            <span class="card-info">来源: {{ card.source }}</span>
            <span class="card-info">更新时间: {{ card.updateTime }}</span>
          </div>
          <div class="meta-item">
            <span class="card-btn card-info" @click="handleToLink(card.src)"
              >立即查看</span
            >
            <span
              class="status"
              :style="{ backgroundColor: CardStatusColorMap[card.status] }"
              >{{ CardStatusMap[card.status] }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div v-else class="cards cards-alter">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps } from "vue";
import {
  Card,
  CardStatus,
  CardStatusColorMap,
  CardStatusMap,
  Category,
  CategoryMap,
  ITabs,
} from "@/consts";
import { firstTabsMock } from "@/mock";

const props = defineProps<{
  cardData: Card[]; // 卡片数据数组
  currentCategory: Category; // 标签分类
}>();

const tabs = ref<ITabs[]>(firstTabsMock);
const activeTab = ref("all");

const filteredCards = computed(() => {
  return props.cardData.filter((card) => {
    // 处理分类过滤
    const categoryMatch =
      props.currentCategory === Category.all
        ? true
        : card.tag === props.currentCategory;

    // 处理状态过滤
    const statusMatch =
      activeTab.value === CardStatus.all
        ? true
        : card.status === activeTab.value;

    // 只有两个条件都满足时才保留该卡片
    return categoryMatch && statusMatch;
  });
});

const handleToLink = (src: string) => {
  // 新标签页打开网站
  window.open(`https://${src}`, "_blank");
  // 当前页跳转网站
  // window.location.href = `https://${src}`;
};
</script>
<style scoped>
.card-list {
  flex: 1;
  padding: 20px;
}
.tab-nav {
  margin-bottom: 20px;
}
.tab-nav span {
  margin-right: 20px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}
.tab-nav span.active {
  background: #fcf5f5;
  color: #c33c31;
}
.tab-nav span:hover {
  background: #f9fafb;
}
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card-item {
  width: 313px;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid #eee;
}
.card-item:hover {
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-logo {
  width: 36px;
  height: 36px;
  margin-right: 14px;
}
.header-right-item {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-weight: bold;
  margin-right: 8px;
  font-size: 16px;
}
.card-tag {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  color: #4667e2;
  background-color: #f1f6fe;
}
.card-desc {
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
}
.meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.meta-item:last-child {
  margin-bottom: 0px;
}
.card-info {
  color: #666;
  font-size: 12px;
}
.card-btn {
  background-color: #fcf5f5;
  color: #c33c31;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.status {
  padding: 2px 6px;
  border-radius: 4px;
  color: #333;
  font-size: 12px;
}
.cards-alter {
  font-size: 22px;
  text-align: center;
}
</style>
